<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>文章详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css">
    <link rel="stylesheet" href="../static/css/animate.css"/>
    <link rel="stylesheet" href="../static/lib/prism/prism.css"/>
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css"/>
    <link rel="stylesheet" href="../static/css/me.css">
    <meta name="_csrf" content="${_csrf.token}"/>
</head>
<body>
<!-- 导航 -->
<nav th:replace="_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Blog</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
            <div class="right m-item item m-mobile-hide">
                <div class="ui icon inverted transparent input m-margin-tb-tiny">
                    <input type="text" placeholder="Search....">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </div>
</nav>

<!-- 中间内容 -->
<div id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn">
    <div class="ui container">

        <!-- 文章头部 -->
        <div class="ui top attached segment">
            <div class="ui horizontal link list">
                <div class="item">
                    <img th:src="@{${blog.headerUrl}}" alt=""
                         class="ui avatar image">
                    <div class="content">
                        <div class="header" th:text="${blog.nickname}">小圳</div>
                    </div>
                </div>
                <div class="item">
                    <i class="calendar icon"></i> <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2023-4-14</span>
                </div>
                <div class="item">
                    <i class="eye icon"></i> <span th:text="${blog.views}">999</span>
                </div>
                <div class="item">
                    <i class="thumbs up icon"></i> <span th:text="${entityLikeCount}">999</span>
                </div>
            </div>
        </div>

        <!-- 图片区域 -->
        <div class="ui attached segment">
            <img src="../static/image/背景图片.jpg" th:src="@{${blog.firstPicture}}" alt=""
                 class="ui fluid rounded image"
                 style="width: 100%;height: 100%;"/>
        </div>

        <!-- 文章内容 -->
        <div class="ui attached padded segment">
            <!--            &lt;!&ndash; 类型 &ndash;&gt;-->
            <!--            <div class="ui right aligned basic segment">-->
            <!--                <div class="ui orange basic label" th:text="${blog.flag}">原创</div>-->
            <!--            </div>-->

            <!-- 标题 -->
            <h2 class="ui center aligned m-title header " th:text="${blog.title}">人在塔在</h2>

            <!-- 文章内容 -->
            <div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large"
                 th:utext="${blog.content}">


            </div>
            <!-- 标签 -->
            <!--            <div class="m-padded-lr-responsive">-->
            <!--                <div class="ui basic teal left pointing label" th:text="${blog.tag.name}">方法论</div>-->
            <!--            </div>-->
            <!--点赞-->
            <div class="ui right aligned basic segment">
                <div class="ui labeled button" tabindex="0">
                    <div class="ui button">
                        <input type="hidden" id="entityId" th:value="${blog.blogId}">
                        <input type="hidden" id="entityType" value="1">
                        <i class="thumbs up icon"></i> <span id="like-status"
                                                             th:text="${entityLikeStatus==1?'已点赞':'赞'}">赞</span>
                    </div>
                    <a class="ui basic label" id="like-count" th:text="${entityLikeCount}">
                        0
                    </a>
                </div>
            </div>
            <!-- 赞赏 -->
            <div th:if="${blog.appreciation}">
                <div class="ui center aligned basic segment">
                    <button id="payButton" class="ui orange basic circular button">赞赏</button>
                </div>
                <div class="ui payQR flowing popup transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit !important;">
                            <div class="image">
                                <img src="../static/image/个人博客.jpg" th:src="@{/image/个人博客.jpg}" alt=""
                                     class="ui rounded bordered image"
                                     style="width: 120px;">
                                <div>支付宝</div>
                            </div>
                            <div class="image">
                                <img src="../static/image/个人博客.jpg" th:src="@{/image/个人博客.jpg}" alt=""
                                     class="ui rounded bordered image"
                                     style="width: 120px;">
                                <div>微信</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 博客信息 -->
        <div class="ui attached positvie message" th:if="${blog.shareStatement}">
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ui class="list">
                        <li>作者：<span th:text="${blog.nickname}">小圳</span><a href="#" th:href="@{/about}"
                                                                            target="_blank">（联系作者）</a></li>
                        <li>发表时间：<span
                                th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2017-10-02 09:08</span>
                        </li>
                        <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                        <li>公众号转载：请在文末添加作者公众号二维码</li>
                    </ui>
                </div>
                <div class="five wide column">
                    <img src="../static/image/个人博客.jpg" alt="" class="ui right floated rounded bordered image"
                         style="width: 110px">
                </div>
            </div>
        </div>

        <!--评论模块-->
        <div class="ui bottom attached segment">
            <!--评论列表-->
            <div id="comment-container" class="ui teal segment">
                <div th:fragment="commentList">
                    <div class="ui threaded comments" style="max-width: 100%;">
                        <h3 class="ui dividing header">评论</h3>
                        <div class="comment" th:each="comment : ${comments}">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005" th:src="${comment.avatar}">
                            </a>
                            <!--一级评论-->
                            <div class="content">

                                <a class="author">
                                    <span th:text="${comment.nickname}">Matt</span>
                                    <div class="ui mini basic teal left pointing label m-padded-mini"
                                         th:if="${comment.adminComment}==1">博主
                                    </div>
                                </a>
                                <div class="metadata">
                                    <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}"
                                    >2023-05-10 21:26</span>
                                </div>

                                <div class="text" th:text="${comment.content}">
                                    评论内容！
                                </div>
                                <div class="actions">

                                    <!--点击回复，获取评论对象的 id 和 昵称-->
                                    <a class="reply" data-commentid="1" data-commentnickname="Matt"
                                       th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}"
                                       onclick="reply(this)">回复</a>

                                    <!--点击点赞，点赞数 +1-->

                                    <!--                                    <a class="commentLike"-->
                                    <!--                                       data-entityid="1" data-entitytype="2"-->
                                    <!--                                       th:attr="data-commententityid=${comment.id},data-commententitytype=${2}"-->
                                    <!--                                       onclick="commentLike(this)"-->
                                    <!--                                       th:id="'comment-like-' + ${comment.id}"-->
                                    <!--                                    >-->
                                    <!--                                        <span id="comment-like-status"-->
                                    <!--                                              th:text="${entityLikeStatus==1?'已点赞':'赞'}">赞</span>-->
                                    <!--                                        <i class="thumbs up icon"></i>-->
                                    <!--                                    </a>-->
                                    <!--                                    <i id="comment-like-count" th:text="${entityLikeCount}">99</i>-->
                                </div>
                            </div>

                            <!--二级评论-->
                            <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                <div class="comment" th:each="reply : ${comment.replyComments}">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005" th:src="${reply.avatar}">
                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <span th:text="${reply.nickname}">小红</span>
                                            <div class="ui mini basic teal left pointing label m-padded-mini"
                                                 th:if="${reply.adminComment}==1"
                                            >博主
                                            </div>
                                            &nbsp;<span class="m-teal"
                                                        th:text="'回复 ' + ${reply.parentNickname}">回复 小白</span>
                                        </a>
                                        <div class="metadata">
                                            <span class="date"
                                                  th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}"
                                            >Today at 5:42PM</span>
                                        </div>
                                        <div class="text" th:text="${reply.content}">
                                            How artistic!
                                        </div>
                                        <!--                                        如果用户已登录-->
                                        <div class="actions" th:if="${loginUser != null}">
                                            <!--点击点赞，点赞数 +1-->
                                            <!--                                        <a class="replyLike" onclick="replyLike(this)">-->
                                            <!--                                            <b>赞</b>-->
                                            <!--                                            <i class="thumbs up icon"></i>-->
                                            <!--                                            <i>99</i>-->
                                            <!--                                        </a>-->
                                            <!--点击评论-->
                                            <a class="reply" data-commentid="1" data-commentnickname="Matt"
                                               th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}"
                                               onclick="reply(this)">回复</a>

                                        </div>
                                        <!--                                        如果用户未登录-->
                                        <div class="actions" th:if="${loginUser == null}">
                                            <!--点击点赞，点赞数 +1-->
                                            <!--                                        <div>-->
                                            <!--                                            <b class="replyLike" onclick="replyLike(this)">赞</b>-->
                                            <!--                                            <i class="thumbs up icon"></i>-->
                                            <!--                                            <i>99</i>-->
                                            <!--                                        </div>-->
                                            <!--点击回复-->
                                            <a class="reply" data-commentid="1" data-commentnickname="Matt"
                                               th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}"
                                               onclick="reply(this)">回复</a>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--发布评论-->
            <div id="comment-form" class="ui form" th:if="${loginUser != null}">
                <input type="hidden" name="blogId" th:value="${blog.blogId}">
                <input type="hidden" name="parentCommentId" value="-1">
<!--                <input type="hidden" name="nickname" th:value="${loginUser.nickname}">-->
<!--                <input type="hidden" name="email" value="-1" th:value="${loginUser.email}">-->
                <div class="field">
                    <textarea name="content" placeholder="请输入评论信息..."></textarea>
                </div>
                <div class="field">
                    <div class="fieldm-mobile-wide m-margin-bottom-small">
                        <button id="commentpost-btn" type="button" class="ui teal m-mobile-wide button"
                                style="width:100px;height: 40px">
                            <i class="edit icon"></i>发布
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!--右下角功能-->
<div class="m-padded m-fixed m-right-bottom">
    <div class="ui vertical icon buttons ">
        <button type="button" class="ui toc teal button">目录</button>
        <a href="#comment-container" class="ui teal button">评论</a>
        <!--        <button class="ui wechat icon button"><i class="weixin icon"></i></button>-->
        <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>
    </div>

    <div class="ui toc-container flowing popup transition hidden" style="width: 250px !important">
        生成目录
        <ol class="	js-toc">

        </ol>
    </div>

    <div id="qrcode" class="ui wechat-qr flowing popup transition hidden m-padded-mini"
         style="width: 120px !important;">
    </div>
</div>

<!-- 底部 -->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/image/博主微信.jpg" class="ui m-margin-top rounded image" alt=""/>
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">莫欺少年穷</a>
                    <a href="#" class="item">莫欺中年穷</a>
                    <a href="#" class="item">莫欺老年穷</a>
                    <a href="#" class="item">死者为大</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email：2796830992@qq.com</a>
                    <a href="#" class="item">QQ：2796830992</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">小圳博客主要分享计算机相关技术和一些有趣的事情哦！</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">xiaozhen-blog 2023.4.10</p>
    </div>
</footer>


<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../static/lib/scrollTo/jquery.scrollTo.min.js"></script>
<script src="../static/lib/prism/prism.js"></script>
<script src="../static/lib/tocbot/tocbot.min.js"></script>
<script src="../static/lib/qrcode/qrcode.min.js"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"></script>
<!--/*/</th:block>/*/-->

<script th:src="@{/js/discuss.js}"></script>

<script th:inline="javascript">
    // 博客点赞功能
    // $.ajax() 的 beforeSend 属性来禁用按钮，以防止重复请求
    // 当用户点击按钮时，如果当前正在发送请求，则直接返回。
    // 如果没有发送请求，则将 isSending 标记设置为 true，禁用按钮并发送请求。
    // 在 complete 回调函数中，将 isSending 标记设置为 false，并重新启用按钮。
    // 这样可以确保每次只发送一个请求。
    var isSending = false;
    $('.button').on('click', function () {

        if (isSending) {
            return;
        }

        isSending = true;

        $.ajax({
            url: '/blog/like',
            type: 'POST',
            data: {"entityType": $('#entityType').val(), "entityId": $('#entityId').val()}, // 传递需要点赞类型（博客、评论）和 id
            beforeSend: function () {
                $('.button').prop('disabled', true);
            },
            success: function (data) {
                // 更新点赞数量
                $('#like-count').text(data.likeCount);
                // 更新点赞状态
                $('#like-status').text((data.likeStatus == 1) ? '已点赞' : '赞');
            },
            error: function () {
                alert('点赞失败，请先登录！');
            },
            complete: function () {
                isSending = false;
                $('.button').prop('disabled', false);
            }
        });
    });

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('#payButton').popup({
        popup: $('.payQR.popup'),
        on: 'click',
        position: 'bottom center'
    });

    tocbot.init({
        tocSelector: '.js-toc',
        contentSelector: '.js-toc-content',
        headingSelector: 'h1, h2, h3',
    });

    $('.toc.button').popup({
        popup: $('.toc-container.popup'),
        on: 'click',
        position: 'left center'
    });

    $('.wechat').popup({
        popup: $('.wechat-qr'),
        // on: 'click', 点击才显示
        position: 'left center'
    });

    var serurl = /*[[#{blog.serurl}]]*/"47.120.10.227:8081";
    var url = /*[[@{/blog/{id}(id=${blog.blogId})}]]*/"";
    var qrcode = new QRCode("qrcode", {
        text: serurl + url,
        width: 110,
        height: 110,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    $('#toTop-button').click(function () {
        $(window).scrollTo(0, 500);
    });

    //评论功能
    //评论表单验证
    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入评论内容'
                }
                ]
            },
        },
    });

    // 获取评论列表i
    $(function () {
        $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.blogId})}]]*/);

    });

    // 点击发布按钮后处理的逻辑
    $('#commentpost-btn').click(function () {
        // 校验 form 表单
        var boo = $('.ui.form').form('validate form');

        if (boo) {
            console.log('校验成功');
            postData();
        } else {
            console.log('校验失败');
        }

    });

    function postData() {
        // 希望请求的地址
        // 并发送以下数据给后端
        $("#comment-container").load(/*[[@{/comments}]]*/"", {
            "parentCommentId": $("[name='parentCommentId']").val(),
            "blogId": $("[name='blogId']").val(),
            // "nickname": $("[name='nickname']").val(),
            // "email": $("[name='email']").val(),
            "content": $("[name='content']").val()
        }, function (responseTxt, statusTxt, xhr) {
            // 提交成功后滚动到最上方的那一条评论
            $(window).scrollTo($('#comment-container'), 600);
            // 提交后清除发布评论里面的内容
            clearContent();
        });
    }

    // 提交后清除发布评论里面的内容
    function clearContent() {
        $("[name='content']").val('');
        $("[name='parentCommentId']").val(-1);
        $("[name='content']").attr("placeholder", "请输入评论信息...");

    }

    // 点击回复后要进行的逻辑
    function reply(obj) {
        var commentId = $(obj).data('commentid'); // 给后端传输评论 id
        var commentNickname = $(obj).data('commentnickname'); // 给后端传输要回复的评论的发布者的名称
        $("[name='content']").attr("placeholder", "@" + commentNickname).focus(); // 渲染发布内容
        $("[name='parentCommentId']").val(commentId); // 修改隐藏域中父评论的评论 id
        $(window).scrollTo($('#comment-form'), 600); // 动画效果
    }


    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

</script>
</body>
</html>